<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/7/29
  Time: 0:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>快递助手 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/qrcode.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            background: #f4f4f4;
        }

        .content {
            background: #82b927;
        }

        .userQRcodeTitle {
            width: 70%;
            margin: 20px auto;
            line-height: 40px;
            border: 2px solid #000;
            text-align: center;
            border-radius: 20px;
            font-size: 18px;
            font-weight: bolder;
            display: none;
        }

        .userQRcodeCont {
            width: 100%;
            padding: 20px 0;
            margin: 0 auto;
            background: #82b927;
        }

        #qrcode {
            width: calc(70% - 40px - 20px);
            margin: 0 auto;
            padding: 20px;
            border: 10px solid #2f4e25;
            background: #fff;
            border-radius: 8px;
            position: relative;
        }

        #qrcode .refresh {
            width: 40px;
            height: 40px;
            position: absolute;
            left: calc(50% - 20px);
            top: calc(50% - 20px);
            background: url(images/refreshicon.png) rgba(0, 0, 0, 0.8) no-repeat center center;
            background-size: 35px 35px;
            border-radius: 5px;
        }

        .userQRcodeCont .userQRcodeDescTxt {
            width: 70%;
            line-height: 50px;
            margin: 0 auto;
            font-size: 25px;
            font-weight: bolder;
            text-align: center;
            color: #fff;
            border-bottom: 4px dotted #fff;
        }

        .userQRcodeCont .useStepCont {
            width: 70%;
            margin: 20px auto 0px;
        }

        .userQRcodeCont .useStepCont ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;
        }

        .userQRcodeCont .useStepCont ul li {
            width: calc(33.3% - 20px);
            padding: 10px 10px;
            float: left;
        }

        .userQRcodeCont .useStepCont ul li .useStepTitle {
            width: 30px;
            line-height: 30px;
            border-radius: 15px;
            margin: 0 auto;
            font-size: 14px;
            background: #fff;
            text-align: center;
        }

        .userQRcodeCont .useStepCont ul li .useStepTxt {
            height: 30px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            margin: 0px;
        }

        .userQRcodeCont .useStepCont ul li .useStepIcon {
            width: 100%;
            height: 50px;
            margin: 5px 0;
        }

        .userQRcodeCont .useStepCont ul li:nth-child(1) .useStepIcon {
            background: url(images/qrcodeicon.png) no-repeat center center;
            background-size: 40px 40px;
        }

        .userQRcodeCont .useStepCont ul li:nth-child(2) .useStepIcon {
            background: url(images/scanQRicon.png) no-repeat center center;
            background-size: 40px 40px;
        }

        .userQRcodeCont .useStepCont ul li:nth-child(3) .useStepIcon {
            background: url(images/completeIcon.png) no-repeat center center;
            background-size: 40px 40px;
        }

        .userQRcodeCont .userInfoCont {
            width: 60%;
            overflow: hidden;
            font-size: 14px;
            margin: 0 auto;
            padding: 0 5%;
            background: #fff;
            display: none;
        }

        .userQRcodeCont .userInfoCont p {
            margin: 0px;
            padding: 0px;
            line-height: 30px;
        }

        .userQRcodeCont .userInfoCont .userName {
            float: left;
            background: url(images/uname.png) no-repeat center left;
            background-size: 18px;
            padding-left: 23px;
        }

        .userQRcodeCont .userInfoCont .userPhone {
            float: right;
            background: url(images/uphone.png) no-repeat center left;
            background-size: 18px;
            padding-left: 23px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <div class="headerNavCont">
            <a href="index.jsp">快递首页</a>
            <a href="userhome.jsp">个人中心</a>
            <a href="delivery.jsp">送货上门</a>
            <a href="sendexpress.jsp">我要寄件</a>
            <a href="lazyboard.jsp">懒人排行</a>
            <a href="expassistant.jsp">快递助手</a>
        </div>
    </div>
    <div class="userQRcodeCont">
        <div id="qrcode">
            <div class="refresh" onclick="qrcode()"></div>
        </div>
        <p class="userQRcodeDescTxt">手机扫码，快捷取货</p>
        <div class="useStepCont">
            <ul>
                <li>
                    <p class="useStepTitle">1</p>
                    <p class="useStepIcon"></p>
                    <p class="useStepTxt">向工作人员出示二维码</p>
                </li>
                <li>
                    <p class="useStepTitle">2</p>
                    <p class="useStepIcon"></p>
                    <p class="useStepTxt">工作人员扫描二维码</p>
                </li>
                <li>
                    <p class="useStepTitle">3</p>
                    <p class="useStepIcon"></p>
                    <p class="useStepTxt">完成取货</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.qrcode.js"></script>
<script src="js/utf.js"></script>
<script>
    function qrcode() {
        $.post("/wx/users/refresh.do", {}, function (data) {
            $("#qrcode").val("");
            console.log(data);
            console.log(data["dataList"][0]["code"]);
            if (200 == data["msgCode"]) {
                var box = data["dataList"][0]["code"];
                var config = {
                    width:$("#qrcode").width(),
                    height:$("#qrcode").width(),
                    text: box,
                    render:"canvas"
                };
                $("#qrcode").qrcode(config);
                $("#qrcode").append("<div class=\"refresh\" onclick=\"qrcode()\"></div>");
                return;
            }
            layer.alert("刷新失败");
            return;
        }, "json");
    }
</script>
<script type="text/javascript">
    $(function () {
        var windowH = $(window).height();
        var contentH = $(".content").height();
        if (contentH < windowH) {
            $(".content").css({"height": windowH + "px"});
        }

        var qrcodeWH = $("#qrcode").width();

        // 数据生成
        var rTextData = $("#rTextData").val();

        var setQRcode = function (textdata) {
            // 设置参数方式
            var qrcode = new QRCode('qrcode', {
                text: textdata,
                width: qrcodeWH,
                height: qrcodeWH,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.Q
            });
            //alert(textdata);
            //alert(qrcodeWH);
        };


        setQRcode(666);


        // $(".refresh").click(function(){
        //     $("#qrcode").html("");
        //     $.ajaxSetup({
        //        async:false
        //     });
        //     $.post("/wx/users/refresh.do",{},function (data) {
        //         console.log(data);
        //         if(200==data["msgCode"]){
        //             setQRcode(data["dataList"][0]["code"]);
        //             $("#qrcode").append("<div class=\"refresh\" ></div>");
        //             return;
        //         }
        //         layer.alert("刷新失败");
        //         return;
        //     },"json");
        //     $.ajaxSetup({
        //         async:true
        //     });
        // })
    });
</script>
</body>
</html>
